<template>
  <basic-layout :title="title" :showAddBtn="false">
    <div class="body_box">
      <div class="head">
        <div class="leftDate">
          <div class="content" id="contentWeek">
            <div v-for="(week, index) in weekArr" class="dates">
              <div :class="{ active: week.date == checkDate, leftDateStyle: true, }" @click="checkItem(week)">
                <div>{{ week.week }}</div>
                <div>{{ week.date }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightCalendar" @click="dateShow = true">
          <div>
            <van-icon name="calendar-o"/>
          </div>
          <div>选择</div>
        </div>
      </div>

      <van-row class="listCon">
        <van-pull-refresh
          class="vanScroller"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            class="vanList"
            v-model="loading"
            :finished="finished"
            :finished-text="listData.length ? '没有更多了' : ''"
            @load="onLoad"
          >
            <div v-for="(item , index) in listData"
                 :style="{ padding: calcP(index), }">
              <div :class="{ itemMain : true }">
                <div :class="{ picStyle: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '1'"/>
                <div :class="{ picStyle_liliao: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '2'"/>
                <div :class="{ picStyle_water: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '3'"/>
                <div :class="{ picStyle_clean: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '4'"/>
                <div :class="{ picStyle_laundry: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '5'"/>
                <div :class="{ picStyle_xiche: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '6'"/>
                <div :class="{ picStyle_banyun: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '7'"/>
                <div :class="{ picStyle_lvhua: true, isNotAvailable: isNotAvailableHandle(item) === '2', isFull: isNotAvailableHandle(item) === '1' }" v-if="srvitemType == '8'"/>
                <div class="rightContent">
                  <div class="firstContent">
                    {{ item.property && item.property.propertyName ? item.property.propertyName : "" }}
                  </div>
                  <div class="secondContent" v-if="item.propertyAppDate && item.propertyAppDate.appMethod == '1'">
                    <div v-if="item.propertyAppTimeSlots.length > 3" class="secondContent_01">
                      <span style="color: #989999;">
                        {{ item.propertyAppTimeSlots[0].beginDate }}
                      </span>
                      <div class="vertical"/>
                      <span style="color: #989999;">
                        {{ item.propertyAppTimeSlots[1].beginDate }}
                      </span>
                      <div class="vertical"/>
                      <span style="color: #989999;">
                        ...
                      </span>
                      <div class="vertical"/>
                      <span style="color: #989999;">
                        {{ item.propertyAppTimeSlots[item.propertyAppTimeSlots.length - 1].beginDate }}
                      </span>
                      <div class="vertical"/>
                      <span style="color: #989999;">
                        多时段
                      </span>
                    </div>
                    <div v-else class="secondContent_02">
                      <div class="secondContent_02_01" v-for="(time, index) in item.propertyAppTimeSlots">
                        <span style="color: #989999;">
                          {{ time.beginDate }}
                        </span>
                        <div v-if="index != 2" class="vertical"/>
                      </div>
                    </div>
                  </div>
                  <div class="content_03" v-if="item.propertyAppDate && item.propertyAppDate.appMethod == '2'">
                    <div class="content_03_01">
                      <div class="content_03_01_01" v-for="(time, index) in item.propertyAppTimeSlots">
                        <span style="color: #989999;">
                          {{ time.timeSlotName }}
                        </span>
                        &nbsp;&nbsp;
                        <span style="color: #989999;">
                          {{ time.beginDate }}
                        </span>
                        <div class="vertical"/>
                      </div>
                    </div>
                  </div>
                  <div class="content_04" v-if="item.propertyAppDate && item.propertyAppDate.appMethod == '3'">
                    <div class="content_04_01">
                      <div class="content_04_01_01" v-for="(time, index) in item.propertyAppTimeSlots">
                        <span style="color: #989999;">
                          {{ time.timeSlotName }}
                        </span>
                        &nbsp;&nbsp;
                        <span style="color: #989999;">
                          {{ time.beginDate }}
                        </span>
                        <div class="vertical"/>
                      </div>
                    </div>
                  </div>
                  <div class="thirdContent">
                    <div class="price">
                      {{ item.servicePriceLabel == null ? '免费' : item.servicePriceLabel }}
                    </div>
                    <div @click="goToApply(item)" v-if="isNotAvailableHandle(item) === '99'">
                      <van-button class="button">预约</van-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
          <van-empty
            v-if="!loading && !listData.length"
            class="custom-image"
            :image="require('../../../../assets/images/empty.png')"
            description="暂无数据"
          />
        </van-pull-refresh>

      </van-row>

      <van-calendar
        v-model="dateShow"
        :min-date="minDate"
        :default-date="selDate"
        :show-confirm="false"
        @confirm="onConfirm"
      />

      <!-- 返回至顶部 -->
      <!--      <div class="backToTop_btn" @click="backToTop">-->
      <!--        <img src="../../../../assets/images/backToTop.png" alt="">-->
      <!--      </div>-->
    </div>
  </basic-layout>
</template>
<script>
import {getMyPropertyItemForAppPage} from "@api/srvAssurance/emplcare/apply/item";
import {getTwoWeekData} from '@/plugins/utils/formatTime'

export default {
  name: 'index',
  props: {},
  components: {},
  data() {
    return {
      title: '预约',
      srvitemType: '1',
      selDate: new Date(),
      minDate: new Date(),
      dateShow: false, //日期show
      checkDate: '',
      refreshing: false,
      loading: false,
      finished: false,
      listData: [],
      pageNum: 1,
      pageSize: 10,
      totalNum: 0,
      weekArr: [],
      timeSlot: [],
    }
  },

  created() {
    // let item = sessionStorage.getItem("emp_care_apply_config");
    // console.log("item", item);

    this.weekArr = getTwoWeekData(new Date(), 14);
    let date = this.formatDate(new Date());
    this.checkDate = date.substring(5, 7) + "." + date.substring(8, 10);
    this.getList();
  },
  computed: {},

  beforeMount() {
    this.$nextTick(() => {
      this.calcWeekLocaltion();
    });
  },

  methods: {
    calcP(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

    checkQueryParam() {
      if (this.$route.query.param && this.$route.query.param.srvitemType) {
        this.srvitemType = this.$route.query.param.srvitemType;
        this.title = "预约";
        this.title = this.title + this.$route.query.param.srvitemTypeLabel;
        let param = {
          srvitemType: this.srvitemType,
          srvitemTypeLabel: this.$route.query.param.srvitemTypeLabel,
        }
        sessionStorage.removeItem("emp_care_apply_index");
        sessionStorage.setItem("emp_care_apply_index", JSON.stringify(param))
      } else {
        let param = JSON.parse(sessionStorage.getItem("emp_care_apply_index"))
        this.srvitemType = param.srvitemType;
        this.title = "预约";
        this.title = this.title + param.srvitemTypeLabel;
      }
    },

    calcWeekLocaltion() {
      let weekIndex = 0;
      this.weekArr.forEach((week, index) => {
        if (week.date == this.checkDate) {
          weekIndex = index;
        }
      });
      let ele = document.getElementById("contentWeek");
      ele.scrollTo({
        top: 0,
        left: (weekIndex - 2) * 50,
        behavior: 'smooth'
      });
    },

    isNotAvailableHandle(item) {
      if (item.propertyAppTimeSlots && item.propertyAppTimeSlots.length > 0) {
        let times = item.propertyAppTimeSlots;
        // 得到items里面flag等于1的数量和items对比，如果一致，返回1，否则返回2
        let flag1 = 0;
        let flag2 = 0;
        for (let i = 0; i < times.length; i++) {
          if (times[i].flag == 1) {
            flag1++;
          }
        }
        for (let i = 0; i < times.length; i++) {
          if (times[i].flag == 2) {
            flag2++;
          }
        }
        if (flag1 == times.length) {
          return '1';
        }
        if (flag2 == times.length) {
          return '2';
        }
      }
      return '99';
    },

    openCalendar() {
      this.dateShow = true;
    },

    checkItem(val) {
      this.checkDate = val.date;
      this.selDate = val.fullDate;
      let param = {
        date: val.date,
        fullDate: val.fullDate.format("yyyy-MM-dd")
      }
      sessionStorage.setItem("emp_care_apply_index_selData", JSON.stringify(param))
      this.onRefresh();
      this.calcWeekLocaltion();
    },

    onRefresh() {
      this.refreshing = false;
      this.finished = false;
      this.listData = [];
      this.pageNum = 1;
      this.getList();
    },

    // backToTop() {
    //   document.querySelector(".vanScroller").scrollTo('0', '0');
    // },

    onLoad() {
      this.pageNum++;
      this.getList();
    },

    async getList() {
      this.checkQueryParam();
      let paramSession = JSON.parse(sessionStorage.getItem("emp_care_apply_index_selData"));
      if (paramSession) {
        this.checkDate = paramSession.date;
        this.selDate = new Date(paramSession.fullDate);
      }
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        srvitemType: this.srvitemType,
        date: this.selDate.format("yyyy-MM-dd"),
      };
      this.loading = true;
      await getMyPropertyItemForAppPage(param).then((res) => {
        this.loading = false;
        if (res.code === 1000 && res.data) {
          this.listData = [...this.listData, ...res.data.records];
          if (this.listData.length >= res.data.total) {
            this.finished = true;
          }
        } else {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },

    goToApply(item) {
      let param = {
        srvitemType: this.srvitemType,
        propertyId: item.propertyId,
        selDate: this.selDate.format("yyyy-MM-dd"),
        servicePriceLabel: item.servicePriceLabel,
      };
      let baseData = {
        propertyName: item.property.propertyName || '',
        propertyAddr: item.property.propertyAddr || '',
        phone: item.property.phone || '',
        servicePriceLabel: item.servicePriceLabel,
      };
      if (sessionStorage.getItem("emp_care_apply_config")) {
        this.$router.push({
          path: "/emplcare/applyExtend",
          query: {param: param, baseData: baseData}
        })
      } else {
        this.$router.push({
          path: "/emplcare/apply",
          query: {param: param, baseData: baseData}
        })
      }
    },

    onConfirm(date) {
      this.date = this.formatDate(date);
      this.checkDate = this.date.substring(5, 7) + "." + this.date.substring(8, 10);
      this.weekArr = getTwoWeekData(date, 14);
      this.selDate = date;
      this.dateShow = false;
      this.onRefresh();
    },

    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1)
      }-${date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate()}`;
    },

  },
}
</script>
<style lang="less" scoped>
.body_box {
  background-color: #f9f9f9;
  height: 100%;

  .head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0px;
    background-color: #FFFFFF;

    .leftDate {
      width: 80%;
      margin-left: 15px;

      .content {
        overflow-x: auto;
        display: flex;
        border-right: 1px solid #ccc;
        align-items: center;
        justify-content: flex-start;

        &::-webkit-scrollbar {
          width: 0px !important;
          height: 0px !important;
        }

        .dates {
          margin: 0px 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .active {
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            width: 100%;
            background: #d7a550 !important;
            height: 40px;

            div {
              color: #ffffff !important;
            }
          }

          .leftDateStyle {
            div:first-child {
              font-size: 14px;
              font-weight: 600;
              text-align: center;
              width: 40px;
              height: 20px;
              line-height: 20px;
            }

            div:last-child {
              font-size: 10px;
              color: #878888;
              text-align: center;
              width: 40px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }

    .rightCalendar {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #989999;
      height: 42px;

      div:first-child {
        font-size: 20px;
        margin-top: -5px;
      }

      div:last-child {
        font-size: 10px;
        margin-top: -5px;
      }
    }
  }

  .listCon {
    height: calc(100% - 82px);


    .vanScroller {
      height: 100%;
      overflow-y: auto;
      //height: calc(100% - 82px);
      //overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
      }

      .vanList {

        .itemMain {
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgb(255, 255, 255);
          color: rgb(51, 51, 51);
          border: 1px solid rgb(220, 223, 230);
          border-radius: 6px;
          height: 100px;
          padding: 10px;

          .picStyle {
            background-image: url('../../../../assets/images/care/hair_cut.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }

          .picStyle_liliao {
            background-image: url('../../../../assets/images/care/li_liao.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }

          .picStyle_water {
            background-image: url('../../../../assets/images/care/water.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }


          .picStyle_clean {
            background-image: url('../../../../assets/images/care/cleaning.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }


          .picStyle_laundry {
            background-image: url('../../../../assets/images/care/xiyi.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }


          .picStyle_xiche {
            background-image: url('../../../../assets/images/care/xiche.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }


          .picStyle_banyun {
            background-image: url('../../../../assets/images/care/banyun.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }

          .isNotAvailable{

            &::after {
              opacity: 0.6;
              content: '';
              display: inline-block;
              width: 100px;
              height: 100px;
              background: url('../../../../assets/images/care/overdue.png') no-repeat #666666;
              background-size: 100% 100%;
            }
          }


          .isFull{

            &::after {
              opacity: 0.6;
              content: '';
              display: inline-block;
              width: 100px;
              height: 100px;
              background: url('../../../../assets/images/care/full.png') no-repeat #666666;
              background-size: 100% 100%;
            }
          }

          .picStyle_lvhua {
            background-image: url('../../../../assets/images/care/lvhua.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
          }


          //.picStyle_water {
          //  background-image: url('src/assets/images/care_deliver_water.jpg');
          //  background-repeat: no-repeat;
          //  background-size: 100% 100%;
          //  height: 100px;
          //  width: 100px;
          //  background-color: #f9f9f9;
          //  color: rgb(51, 51, 51);
          //  border: 1px solid rgb(220, 223, 230);
          //  border-radius: 6px;
          //}

          .rightContent {
            width: calc(100% - 90px);
            height: 100px;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .firstContent {
              height: 25px;
              line-height: 25px;
              font-size: 16px;
              font-weight: 600;
            }

            .secondContent {
              height: 25px;
              line-height: 25px;

              .secondContent_01 {
                display: flex;
              }

              .secondContent_02 {
                display: flex;

                .secondContent_02_01 {
                  height: 20px;
                  display: flex;
                }
              }


              .vertical {
                border: 0.5px solid rgb(204, 204, 204);
                width: 0px;
                margin-top: 5px;
                margin: 6.5px 5px 0px 5px;
                height: 10px;
              }
            }

            .content_03 {

              .content_03_01 {
                display: flex;

                .content_03_01_01 {
                  height: 20px;
                  display: flex;
                }
              }
            }

            .content_04 {

              .content_04_01 {
                display: flex;

                .content_04_01_01 {
                  height: 20px;
                  display: flex;
                }
              }

            }

            .vertical {
              border: 0.5px solid rgb(204, 204, 204);
              width: 0px;
              margin: 4px 5px 0px 5px;
              height: 10px;
            }

            .thirdContent {
              //height: 50px;
              //line-height: 50px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 30px;

              .price {
                color: #d7a550;
                font-size: 18px;
              }

              .button {
                background-color: rgb(215, 165, 80);
                border: 1px solid rgb(220, 223, 230);
                border-radius: 20px;
                width: 70px;
                height: 33px;
                color: #FFFFFF;
                font-size: 17px;
                font-weight: 600;
              }
            }
          }
        }
      }

      .no-data {
        display: flex;
        flex-direction: column;
      }
    }
  }


  .backToTop_btn {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 100px;
    right: 14px;
    border-radius: 24px;
  }


}


</style>
